import { ExtractPropTypes } from 'vue'
import { validatorColorValue, validatorSizeValue } from '../../utils'
import { UPDATE_MODEL_EVENT } from '../../constants'

/**
 * 显示模式有效值
 */
export const VerificationCodeInputModes = ['box', 'bottomLine', 'middleLine'] as const
export type VerificationCodeInputMode = typeof VerificationCodeInputModes[number]

/**
 * props参数
 */
export const verificationCodeInputProps = {
  /** modelValue, 验证码的值 */
  modelValue: {
    type: [String, Number],
    default: ''
  },
  /** 最大可输入长度 */
  maxlength: {
    type: Number,
    default: 4
  },
  /** 输入框模式 */
  mode: {
    type: String,
    default: (): VerificationCodeInputMode => {
      return 'box'
    },
    validator: (value: VerificationCodeInputMode) => {
      return VerificationCodeInputModes.includes(value)
    }
  },
  /** 用点代替输入的内容 */
  dotFill: {
    type: Boolean,
    default: false
  },
  /** 文字大小, 单位rpx */
  fontSize: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 字体加粗 */
  bold: {
    type: Boolean,
    default: false
  },
  /** 激活时的颜色, 支持十六进制、rgb()、rgba()的值 */
  activeColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value, false)
    }
  },
  /** 未激活时的颜色, 支持十六进制、rgb()、rgba()的值 */
  inactiveColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value, false)
    }
  },
  /** 自动获取焦点 */
  focus: {
    type: Boolean,
    default: false
  },
  /** 禁用原生键盘, 使用自定义键盘该参数需要设置为true */
  disabledKeyboard: {
    type: Boolean,
    default: false
  }
}
export type VerificationCodeInputProps = ExtractPropTypes<typeof verificationCodeInputProps>

export const verificationCodeInputEmits = {
  [UPDATE_MODEL_EVENT]: (value: string | number) => typeof value === 'string' || typeof value === 'number',
  change: (value: string | number) => typeof value === 'string' || typeof value === 'number',
  /** 输入完成时触发 */
  complete: (value: string | number) => typeof value === 'string' || typeof value === 'number'
}
export type VerificationCodeInputEmits = typeof verificationCodeInputEmits
